<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_外间距设置</title>
    <style>
        /*去掉body元素自带的四个方向的外边距*/
        body{
            margin: 0;
        }
       *{
           /*去掉所有元素自带的内外边距*/
           margin: 0;
           padding: 0;
       }
       .fu{
          background-color: rgba(255,255,0,.3);
           /*父子粘连/贴边
           现象：首个子元素的上外间距与最后一个元素的下外间距会超出父元素的范围*/
           overflow: hidden;
       }
       .fu>div{
           width: 100px;/*宽度*/
           height: 100px;/*高度*/
           background-color: rgba(0,0,255,.6);/*带透明度的背景色*/
           border: 2px solid #00f;/*边框*/
           color: #fff;/*字体颜色*/
           font-size: 25px;/*字体大小*/
           font-weight: bold;
       }
       /*1.相邻兄弟在垂直方向上的外间距取大值显示，并不会相加*/
       .zi1{
           margin-bottom: 30px;
           margin-top: 50px;
       }
       .zi2{
           margin-top: 50px;
       }
       .zi4{
           margin-bottom: 50px;
       }
       .zi3{
           margin: 10px;
           margin: 10px 20px;
           margin: 10px 20px 30px;
           margin: 10px 20px 30px;
           margin: 10px 20px 30px 40px;
           /*实现块级元素只身的水平居中 auto 会自动将元素的左右外间距计算成相等的值*/
           margin: 0 auto;
       }
       span{
           border: 2px solid red;
       }
       .s2{
           margin: 30px;
       }

    </style>
</head>
<body>
<div class="fu">
    <span>span1</span>
    <span class="s2">span2</span>
    <span>span3</span>
    <div class="zi1">子元素1</div>
    <div class="zi2">子元素2</div>
    <div class="zi3">子元素3</div>
    <div class="zi4">子元素4</div>
</div>
</body>
</html>